<template>
  <div class="page-layout" :class="{ 
    'page-layout--fixed': fixed,
    'page-layout--has-tabs': tabs && tabs.length > 0
  }">
    <!-- AppBar -->
    <AppBar 
      :title="title"
      :subtitle="subtitle"
      :show-back="showBack"
      :show-close="showClose"
      :fixed="fixed"
      :shadow="shadow"
      :variant="variant"
      :safe-area="safeArea"
      :tabs="tabs"
      :scrollable="scrollable"
      :model-value="modelValue"
      @back="handleBack"
      @close="handleClose"
      @update:model-value="handleTabChange"
    >
      <!-- 左侧插槽 -->
      <template v-if="$slots.left" #left>
        <slot name="left"></slot>
      </template>
      
      <!-- 中间插槽 -->
      <template v-if="$slots.center" #center>
        <slot name="center"></slot>
      </template>
      
      <!-- 右侧插槽 -->
      <template v-if="$slots.right" #right>
        <slot name="right"></slot>
      </template>
    </AppBar>

    <!-- 页面内容 -->
    <div 
      class="page-layout__content" 
      :class="{ 'page-layout__content--padding': contentPadding }"
    >
      <SwipeableTabContainer
        v-if="tabs && tabs.length > 0"
        :tabs="tabs"
        :model-value="modelValue"
        @update:model-value="handleTabChange"
        @tab-change="handleTabChange"
      >
        <template v-for="tab in tabs" :key="tab.value" #[`tab-${tab.value}`]="{ tab: tabItem, index }">
          <slot :name="`tab-${tab.value}`" :tab="tabItem" :index="index">
            <slot :tab="tabItem" :index="index"></slot>
          </slot>
        </template>
      </SwipeableTabContainer>
      <slot v-else></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import AppBar, { type TabItem } from './AppBar.vue'
import SwipeableTabContainer from './SwipeableTabContainer.vue'

interface Props {
  // AppBar 相关属性
  title?: string
  subtitle?: string
  showBack?: boolean
  showClose?: boolean
  fixed?: boolean
  shadow?: boolean
  variant?: 'default' | 'transparent' | 'gradient'
  safeArea?: boolean
  
  // 内容区域相关
  contentPadding?: boolean

  // Tab 相关
  tabs?: TabItem[]
  scrollable?: boolean
  modelValue?: string | number
}

interface Emits {
  (e: 'back'): void
  (e: 'close'): void
  (e: 'update:modelValue', value: string | number): void
  (e: 'tab-change', value: string | number): void
}

const props = withDefaults(defineProps<Props>(), {
  title: '',
  subtitle: '',
  showBack: false,
  showClose: false,
  fixed: true,
  shadow: false,
  safeArea: true,
  variant: 'default',
  contentPadding: true,
  tabs: () => [],
  scrollable: false
})

const emit = defineEmits<Emits>()

const handleBack = () => {
  emit('back')
}

const handleClose = () => {
  emit('close')
}

const handleTabChange = (value: string | number) => {
  emit('update:modelValue', value)
  emit('tab-change', value)
}
</script>

<style scoped>
.page-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
}

.page-layout__content {
  flex: 1;
  width: 100%;
  overflow: hidden;
  position: relative;
  min-height: 0;
}

/* 当 AppBar 固定时，需要添加顶部间距 */
.page-layout--fixed .page-layout__content {
  margin-top: 56px; /* AppBar 默认高度 */
}

/* 当有 tabs 时，AppBar 的总高度已经包含 tabs，使用总高度 */
.page-layout--fixed.page-layout--has-tabs .page-layout__content {
  margin-top: 104px; /* AppBar 总高度（包含 tabs） */
}

.page-layout__content--padding {
  padding: 20px;
}

</style>

